/*
 * @Author: mayijun
 * @Date: 2022-04-24 11:37:38
 * @LastEditors: mayijun
 * @LastEditTime: 2022-05-18 19:16:49
 */
import { computed, defineComponent, PropType, reactive, ref } from "vue";
//修饰词级联选择器
const ModifierCascader = defineComponent({
  name: 'ModifierCascader',
  props: {
    modelVal: {
      type: Array as PropType<string[]>,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => []
    },
  },
  emits: ['change', 'update:modelVal'],
  setup: (props, { slots, attrs, emit }) => {
    //v-model的值
    const modelVal = computed({
      get: () => props.modelVal,
      set: (v) => emit('update:modelVal', v)
    });

    const state = reactive({
      config: { multiple: true }
    });

    return () => {
      return (
        <el-cascader
          size="large"
          disabled={props.disabled}
          popper-class="word-cascader"
          options={props.list}
          props={state.config}
          show-all-levels={false}
          placeholder="请选择修饰词"
          v-model={modelVal.value}
          onChange={(v: any) => {
            emit('change', v)
          }}
        ></el-cascader>
      )
    }
  }
});

export default ModifierCascader;